<template>
  <div class="search-content">
    <div class="content-left" ref="contentLeft">
      <ul class="left-list" ref="leftList"> 
        <li class="list-item"
         v-for='(item, index) in goodsList' :key="index"
         :class="{ active : currentIndex === index }"
         @click="leftItemClick(index)"
         >
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="content-right" ref="contentRight">
      <ul class="right-list" ref="rightList">
        <li class="list-item" v-for="(item, index) in goodsList" :key="index">
          <div class="item-top">
            <span class="title">{{item.name}}</span>
            <span class="more">查看更多  <i class="iconfont icon-arrow-right-copy-copy-copy"></i> </span>
          </div>
          <div class="content">
            <ul class="content-list">
              <li class="content-item" v-for="(cate,index) in item.items" :key="index">
                <div class="item-img">
                  <img src="//t00img.yangkeduo.com/goods/images/2019-03-16/6a1e586a-ae7e-4f42-b420-bc27a609fe13.png?imageMogr2/sharpen/1%7CimageView2/2/w/112/q/70/format/webp" alt="" width="100%">
                </div>
                <span class="item-name">{{cate.title}}</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll'
export default {
  name: 'searchContent',
  mounted () {
    // this._initData()
  },
  data () {
    return {
      goodsList: [],
      heightArr: [],
      scrollY:0
    }
  },
  methods: {
    async _initData () {
     let { data } = await axios.get('/static/mock/searchList.json')
     if(data.success_code === 200) {
       this.goodsList = data.message.data
       this.$nextTick(() => {
         this._initScroll()
         this._calculateHeight()
       })
     }
    },
    _initScroll () {
      this.leftSCroll = new BScroll(this.$refs.contentLeft, {
        click: true
      })
      this.rightSCroll = new BScroll(this.$refs.contentRight, {
        probeType: 3
      })
      this.rightSCroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    _calculateHeight () {
      let listItem = this.$refs.rightList.querySelectorAll('.list-item')
      let height = 0
      this.heightArr.push(height)
      for(let i = 0; i< listItem.length; i++) {
        height += listItem[i].clientHeight
        this.heightArr.push(height)
      }
    },
    leftItemClick (index) {
      let rightList = this.$refs.rightList.querySelectorAll('.list-item')
      this.rightSCroll.scrollToElement(rightList[index], 300)
      console.log(index)
    },
    asyncLeft (index) {
      console.log(index)
      let ele = this.$refs.leftList.querySelectorAll('.list-item')[index]
      this.leftSCroll.scrollToElement(ele,300)
    }
  },
  computed: {
    currentIndex () {
      for(let i =0; i<this.heightArr.length; i++) {
        let height1 = this.heightArr[i]
        let height2 = this.heightArr[i + 1]
        if( !height2 || ( this.scrollY >= height1 && this.scrollY<height2 )) {
          this.asyncLeft(i)
          return i
        }
      }
      return 0
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/mixins.styl'
.search-content
  position absolute
  top 50px
  left 0
  right 0
  bottom 50px
  display flex
  .content-left
    flex-basis 90px
    height 100%
    background #fafafa
    overflow hidden

    .left-list
      overflow hidden
      .list-item
        color rgb(102, 102, 102)
        width 90px
        height 50px
        line-height 50px
        text-align center
        font-size 12px
      .active
        color $pddRed
        position relative
        background #fff
        &::before
          content ''
          display block
          position absolute
          width 5px
          height 30px
          background $pddRed
          left 0
          top 10px
  .content-right
    flex 1
    height 100%
    background white
    overflow hidden
    .right-list
      width 100%
      padding-bottom 400px
      .list-item  
        width 100%
        .item-top
          display flex
          width 100%
          justify-content space-between
          align-items center
          color $lightGray
          padding 0 10px
          box-sizing border-box
          height 37px
          .title
            font-size 14px
        .content
          .content-list
            width 100%
            display flex
            flex-wrap wrap
            .content-item
              width 33.33%
              display flex
              justify-content center
              flex-direction column
              align-items center
              padding-bottom 10px
              height 75px
            
              .item-img
                width 50%
                // img 
                //   width 100%
              .item-name
                text-align center
                color #333
                font-size 12px



</style>
